<template>
  <div class="myWallet">
    <van-nav-bar
      title="我的账户"
      left-text=""
      left-arrow
      @click-left="backlink"
    ></van-nav-bar>
    <div class="myBalance">
      <div class="balance-top">
        <div class="balance-left">
          <div>
            <div class="balanceTitle">储值卡余额（元）</div>
            <div class="balanceNum">2600.00</div>
          </div>
          <van-button round class="chongzhibtn"> 充值 </van-button>
        </div>
      </div>
      <div class="balance-bottom">
        <div class="bottom-left">今日消耗</div>
        <div class="bottom-right">余额明细</div>
      </div>
    </div>
    <div class="boxtitle">
      <div class="shuxian"></div>
      <div class="datetitle">佣金</div>
    </div>
    <div class="myBalance1">
      <div class="balance-top">
        <div class="balance-left">
          <div>
            <div class="balanceTitle">累计佣金（元）</div>
            <div class="balanceNum">3600.00</div>
          </div>
        </div>
        <div class="balance-right">
          <div>佣金明细</div>
        </div>
      </div>
      <div class="balance-bottom">
        <div class="bottom-1">
          <div class="bottom-tittle">待入账</div>
          <div class="bottom-num">0.00</div>
        </div>
        <div class="bottom-2">
          <div class="bottom-tittle">待入账</div>
          <div class="bottom-num">0.00</div>
        </div>
        <div class="bottom-3" style="">
          <div class="bottom-tittle">待入账</div>
          <div class="bottom-num">0.00</div>
        </div>
      </div>
      <div class="balance-bottom">
        <van-button round class="tixianbtn">立即提现 </van-button>
      </div>
    </div>

    <div class="two-things">
      <div class="jiFen">
        <div class="jiFenTitle">积分余额</div>
        <div class="jiFenDetails">
          <div class="red">500积分</div>
          <div class="keYong">可用</div>
        </div>
      </div>
      <div class="jiFen1">
        <div class="jiFenTitle">优惠券</div>
        <div class="jiFenDetails">
          <div class="red">1张</div>
          <div class="keYong">可用</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyWallet",
  methods: {
    backlink() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.myWallet {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f3f5;
}
.myBalance {
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: 20px auto;
  height: 20%;
  background-image: url("../../assets/images/chuzhibg.png");
  background-position: center;
  background-size: cover;
  color: white;
  padding: 0.3rem;
  border-radius: 0.1rem;
}
.balance-top {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.1rem;
  width: 100%;
}
.balance-left {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
.balanceTitle {
  font-size: 0.4rem;
  margin: 0.2rem;
}
.balanceNum {
  font-size: 1rem;
  margin: 0.2rem;
}
.chongzhibtn {
  width: 1.7rem;
  height: 0.7rem;
  margin-bottom: 0.5rem;
  margin-right: 0.2rem;
  color: #5ea2fc;
}
.balance-bottom {
  display: flex;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
  padding: 0.2rem;
  font-size: 0.45rem;
  justify-content: space-between;
}
.bottom-left {
  margin-left: 10%;
}
.bottom-right {
  margin-right: 10%;
}
.myBalance1 {
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: 10px auto;
  height: 20%;
  background: linear-gradient(to right, white, #cae6fe);
  color: black;
  padding: 0.3rem;
  border-radius: 0.1rem;
}
.boxtitle {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 4px;
  font-weight: 550;
}
.balance-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  font-size: 0.4rem;
  color: gray;
  margin: 0.2rem;
}
.bottom-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.4rem;
}
.bottom-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.4rem;
}
.bottom-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.4rem;
}
.tixianbtn {
  width: 100%;
  height: 1.1rem;
  background-color: #5ea2fc;
  color: white;
}
.two-things {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}
.jiFen {
  background-image: url("../../assets/images/jifen.png");
  background-position: center;
  background-size: cover;
  width: 48%;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 0.1rem;
}
.jiFen1 {
  background-image: url("../../assets/images/quan.png");
  background-position: center;
  background-size: cover;
  width: 48%;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 0.1rem;
}
.jiFenTitle {
  font-size: 20px;
}
.jiFenDetails {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  font-size: 16px;
}
.red {
  font-size: 22px;
  color: #ff6a39;
  margin-top: 5px;
}
</style>